window.onload = async function () {
  const res = await axios({ url: "/dashboard" });
  console.log(res);
  const { year, salaryData, groupData ,provinceData} = res.data.data;
  // console.log(year);
  // 设置标题部分
  for (let key in res.data.overview) {
    console.log(`[name="${key}"]`);
    document.querySelector(`[name="${key}"]`).innerHTML =
      res.data.overview[key];
  }

  // 全学科薪资走势
  renderSubject(year);
  renderClassSalary(groupData);
  renderClass(salaryData)
  renderGenderSalary(salaryData)
  initMapChart(provinceData)
};
function renderSubject(arr) {
  var myChart = echarts.init(document.getElementById("line"));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: "2022全学科薪资走势",
      top: "10",
      left: "10",
    },
    xAxis: {
      type: "category",
      data: arr.map((item) => item.month),
      axisLine: {
        lineStyle: {
          type: "dashed",
          color: "skyblue",
        },
      },
      axisLabel: {
        color: "#000",
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "skyblue",
        },
      },
    },
    series: [
      {
        data: arr.map((item) => item.salary),
        type: "line",
        smooth: true,
        lineStyle: {
          width: 8,
          color: "#5f8eff",
        },
        symbolSize: 10,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#c8e2ff", // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
//每组薪资
function renderClassSalary(groupData) {
  var myChart = echarts.init(document.getElementById("lines"));

  // 指定图表的配置项和数据
  var option = {
    xAxis: {
      type: "category",
      data: groupData[1].map((item) => item.name),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: groupData[1].map((item) => item.hope_salary),
        type: "bar",
      },
      {
        data: groupData[1].map((item) => item.salary),
        type: "bar",
      },
    ],
    color: [
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#3ad39c", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#e4fefc", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#55b1ff", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#e4fefc", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  const btns = document.querySelectorAll("#btns button");
  btns.forEach((item) => {
    //  console.log(item);
    item.addEventListener("click", function () {
      document.querySelector("#btns .btn-blue").classList.remove("btn-blue");
      this.classList.add("btn-blue");
      const index = this.innerHTML.trim();
      // console.log(index);
      option.xAxis.data = groupData[index].map((v) => v.name);
      option.series[0].data = groupData[index].map((v) => v.hope_salary);
      option.series[1].data = groupData[index].map((v) => v.salary);
      myChart.setOption(option);
    });
  });
}

function renderClass(arr) {
  var myChart = echarts.init(document.getElementById('salary'));

  // 指定图表的配置项和数据
  var option = {
      title: {
          text: '班级薪资分布'
      },
      tooltip: {
          trigger: 'item'
      },
      legend: {
          bottom: '5%',
          left: 'center'
      },
      series: [
          {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
              },
              label: {
                  show: false,
                  position: 'center'
              },
              emphasis: {
                  label: {
                      show: true,
                      fontSize: '40',
                      fontWeight: 'bold'
                  }
              },
              labelLine: {
                  show: false
              },
              data: arr.map(item => ({
                  value: item.g_count + item.b_count,
                  name: item.label
              }))
          }
      ],
      color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a',]
  };


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

function renderGenderSalary(arr) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('gender'));

  // 指定图表的配置项和数据
  var option = {
      title: [
          {
              text: '男女薪资分布',
              left: '10',
              top: '10'
          },
          {
              text: '男生',
              left: '50%',
              top: '40%',
              textAlign: 'center'
          },
          {
              text: '女生',
              left: '50%',
              top: '90%',
              textAlign: 'center'
          }
      ],
      tooltip: {
          trigger: 'item'
      },

      series: [
          {
              name: 'Access From',
              type: 'pie',
              radius: ['15%', '25%'],
              data: arr.map(item => ({
                  value: item.b_count,
                  name: item.label
              })),
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              },
              center: ['50%', '20%']
          },
          {
              name: 'Access From',
              type: 'pie',
              radius: ['15%', '25%'],
              data: arr.map(item => ({
                  value: item.g_count,
                  name: item.label
              })),
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              },
              center: ['50%', '70%']
          }
      ],
      color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a',]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
function initMapChart (provinceData) {
  console.log('provinceData:', provinceData)
  // 找到元素
  const myEchart = echarts.init(document.querySelector('#map'))
  // 选项
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]
  // 数据转换
  provinceData.forEach(v => {
    dataList.find(item => {
      // indexOf-1 不存在
      // indexof 0 找到了
      // console.log(v.name.indexOf(item.name))
      if (v.name.indexOf(item.name) === 0) {
        // console.log('item.name:', item.name)
        // console.log('v.name:', v.name)
        // 服务器返回的 value 设置给对应本地数据的value
        item.value = v.value
      }
    })
  })
  // console.log('dataList:', dataList)

  let option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff'
      }
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0']
      },
      show: true,
      left: 40
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)'
        }
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff'
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList
      }
    ]
  }
  // 生成图表
  myEchart.setOption(option)
}

